<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.layer1{width:100%; height:150px;}
  .layer1-1{width:50%; height:150px;background:blue;float:left;}
  .layer1-2{width:50%; height:150px;background:green;float:left;}
  .layer1-3{clear:both;}
.layer2{width:100%; height:300px;}
   .layer2-1{width:100%; height:150px;}
      .layer2-1-1{width:30%; height:150px;background:yellow;float:left;}
      .layer2-1-2{width:40%; height:150px;background:orange;float:left;}
      .layer2-1-3{width:30%; height:150px;background:skyblue;float:left;}
      .layer2-1-4{clear:both;}
   .layer2-2{width:100%; height:150px;}
      .layer2-2-1{width:100%; height:75px;background:#ffaad5;float:left;}
      .layer2-2-2{width:100%; height:75px;background:orange;float:left;}
      .layer2-2-3{clear:both;}
   .layer2-3{clear:both;}
.layer3{width:100%; height:150px;background:green;}
</style>
</head>

<body>
       <div class=layer1>
            <div class=layer1-1></div>
            <div class=layer1-2></div>
            <div class=layer1-3></div>
       </div>
       <div class=layer2>
            <div class=layer2-1> 
                 <div class=layer2-1-1></div>
                 <div class=layer2-1-2></div>
                 <div class=layer2-1-3></div>
                 <div class=layer2-1-4></div>
            </div>
            <div class=layer2-2>
            <div class=layer2-2-1></div>
            <div class=layer2-2-2></div>
            <div class=layer2-2-3></div>
            </div>
            <div class=layer2-3></div>
       </div>
       <div class=layer3></div>
</body>
</html>
